<template>
    <div>
        <Upload
            multiple
            type="drag"
            name="avatar"
            action="http://localhost:3000/upload/upload"
            :on-success="success"
            :before-upload="beforeUpload"
            >
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或将文件拖拽到这里上传</p>
            </div>
        </Upload>

        <div class="layout-content">
            <Row>
                <Col span="5">
                    <Menu active-name="1-2" width="115px" :open-names="['1']">
                        <Tree :data="baseData" @on-select-change="getNodeId"></Tree>
                    </Menu>
                </Col>
                <Col span="19">
                    <div class="layout-content-main" style="width:100%">
                        <Button type="error" @click="delAll">删除选中</Button>
                        <scroll height="480">
                            <Table border :columns="columns7" @on-selection-change="selected" :data="list"></Table>
                        </scroll>
                        <Page :total="filter.total" show-total size="small" show-elevator show-sizer @on-page-size-change="pageSizeChange" :page-size-opts='set'  @on-change='changePage' :current='filter.current'  :page-size='size' placement="top"></Page>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                columns7: [
                    {
                        type:'selection',
                        width:60,
                        align:'center'
                    },
                    {
                        title: '图片',
                        key: 'picurl',
                        width: 195,
                        render: (h, params) => {
                            return h('div', [
                                h('img', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    attrs:{
                                        src:params.row.picurl
                                    },
                                    style: {
                                        height:'90px',
                                    }
                                }, ''),
                            ])
                        }
                    },
                    {
                        title: '源文件名',
                        key: 'originalname',
                        width:130,
                    },
                    {
                        title: '存储名',
                        key: 'filename',
                        width:130
                     },
                     {
                        title: '文件类型',
                        key: 'type',
                        width: 98
                     },
                     {
                        title: '大小',
                        key: 'size',
                        width: 80
                     },
                     {
                        title: '时间',
                        key: 'date',
                        width:100
                     },
                     
                    {
                        title: '操作',
                        key: 'action',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Message.success('删除成功!');
                                            this.deleteData(params.row._id,params.row.filename);
                                            
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                itid:'',
                baseData:[],
                cateId:null,
                module:'news',
                formValidate:{
                    originalname:'',
                    filename: '',
                    type:'',
                    size: '',
                    picurl:'',
                    cateId:null
                },
                list:[],
                curpage:'',
                id:'',
                set:[2,4,6,10],
                size:4,
                select:[],
                fns:[],
                modal1: false,
                valuein:'',
                filter:{
                    page:1,
                    limit:4,
                    name:'',
                    total:0,
                    current:1,
                    postId:''
                }
            }
        },
        created(){
            this.getTree();
            this.getData();
        },
        methods:{
            getTree(type){
                this.$http({
                    url:'http://localhost:3000/cate/list/2',
                    method:'get'
                }).then(res=>{
                    this.baseData = res.data;
                })
            },
            getNodeId(nodeInfo){
                try{
                    if(!nodeInfo[0].children){
                        this.id=nodeInfo[0]._id;
                        this.formValidate.cateId=nodeInfo[0]._id;
                        this.getData();
                    }else{
                        this.$Message.info('请点击子分类获取信息！')
                    }
                }catch(e){
                    this.$Message.info('再点击一次节点!');
                }
            },
            getData(){
                if(this.id){
                    console.log('有')
                    this.filter.postId=this.id;
                    this.$http({
                        method:'post',
                        url:'http://localhost:3000/upload/getcate',
                        data:this.filter
                    })
                    .then(res=>{
                        console.log(res);
                        if(res.data.rows){
                            this.list = res.data.rows;
                        }else{
                            this.list = res.data
                        }
                        this.filter.total = res.data.total;
                        this.curpage=res.data.pages;
                        this.filter.limit=res.data.limit;
                    })
                }else{
                    console.log('无')//请求分页；
                    this.$http({ 
                        method:'post',
                        url:'http://localhost:3000/upload/list',
                        data:this.filter
                    })
                    .then(res=>{
                        console.log(res)
                        if(res.data.rows){
                            this.list = res.data.rows;
                        }else{
                            this.list = res.data
                        }
                        this.filter.total = res.data.total;
                        this.curpage=res.data.pages;
                        this.filter.limit=res.data.limit;
                    })
                }
                
            },
            success(res,file){
                console.log(res)
                this.formValidate.originalname=res.originalname;
                this.formValidate.filename=res.filename;
                this.formValidate.type=res.mimetype;
                this.formValidate.picurl=res.dataurl;
                this.formValidate.size=parseInt(res.size/1024)+'kb';
                this.$http({//添加
                    method:"post",
                    url:'http://localhost:3000/upload/data',
                    data:this.formValidate
                }).then((response)=>{
                    console.log(response)
                    this.$Message.success('上传成功!');
                    this.getData();
                    
                })
            },
            pageSizeChange(page){
                this.size=page;
                this.filter.limit=page;
                
                this.changePage(this.filter.current);
            },
            selected(selection){
                this.select=[];
                this.fns=[];
                for(var i=0;i<selection.length;i++){
                    this.select.push(selection[i]._id);
                    this.fns.push(selection[i].filename);
                }
            },
            
            deleteData(id,filename){
                this.$http({
                    method:"post",
                    url:'http://localhost:3000/upload/remove',
                    data:{id:id,filename:filename}
                }).then((response)=>{
                    this.getData();
                });
            },
            delAll(){
                this.$http({
                    method:"delete",
                    url:'http://localhost:3000/upload/data',
                    data:{ids:this.select,fns:this.fns}
                }).then((response)=>{
                    this.$Message.success('删除成功!');
                    this.getData();
                    this.changePage(this.filter.current);
                })
                
            },
            changePage(page){
                this.filter.page=page;
                this.getData();
                this.filter.current=page;
            },
            beforeUpload(){
                if(!this.id){
                    this.$Message.error('请先选择一个上传的分类！');
                    return false
                }
            }
        }
    }
</script>

<style scoped>
    .ivu-col-span-5{
        width:14%;
    };
</style>
